import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom'
import Auth from "./../uitl/uitl"
const LoginView = (props) => {
  console.log(props);
  const [redirectToReferrer, setReferrer] = useState(false);
  const [from, setFrom] = useState(props.location.state ? props.location.state.from : { pathname: "/" })  // 设置登录成功后，要跳转的目标地址

  console.log(from);
  const login = () => {
    // 省略登录过程
    // 登录成功后，修改isAuthenticated为true,redirectToReferrer为true
    Auth.aututhenticate(() => {
      setReferrer(true)
    })
  }
  // 当redirectToReferrer改变时，就会重新渲染页面，执行下面得if语句，
  if (redirectToReferrer) {
    // 只有执行了这里得return，后面得代码就不再执行。
    return (
      <Redirect to={from} />
    )
  }
  return (
    <div>
      <h1>LOGIN组件</h1>
      {/* <p>你必须登录后，才可以访问到 {from.pathname} 页面</p>
      <button type='button' onClick={login}>登录</button> */}
      <br />
      <button type='button' onClick={() => {
        props.history.push("/home")
      }}>HOME</button>
      <button type='button' onClick={() => {
        props.history.push("/about")
      }}>About</button>

    </div>
  );
}

export default LoginView;
